<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值
		css()           功能：添加任何样式表下的属性和属性值
		                1个参：获取匹配集合元素中的第一个css属性值
						2个参：设置匹配集合元素中所有元素的属性和属性值
						n个参：多层设置匹配集合元素中所有元素的属性和属性值
						语法糖:css({"属性"："属性值","属性":"属性值"})
					.btn{
						borer:1px solid red;
					}
					
		height()和width()    功能：匹配集合元素中第一个元素的高度和宽度值
				                     无参：获取匹配集合元素中第一个元素的高度和宽度值
									 有参：设置匹配集合元素中第一个元素的高度和宽度值  
		outerHeight()和outerWidth()  功能:元素的宽高度
		                            无参:获取元素宽高度，包含内边距+边框
		                            有参:只允许传bool值，true 外加一个外边距-->
		<style>
			.box{
				background-color: plum;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
			}
			.result{
				font-weight: 700;
				margin-top: 10px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!--.box添加样式属性：背景色，内外边距：20px 边框5px
		.result添加样式属性：上外边距：10px 字体加粗：
		jq框架引入-->
		<!-- html 结构  创建两个div平行 6个button-->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置多层效果</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbpBtn">获取元素高度【包含：内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包含：内边距+边框+外边距】</button>
		<!--2.显示效果提示区域-->
		<div class="result" id="result"></div>
		<script>
			/*1.点击 获取背景颜色 按钮 获取背景颜色值*/
			$("#getColorBtn").click(function(){
				//jq css("属性名")  获取属性值
			var bgcolor=$(".box").css("background-color");
			//显示区域--提示：获取的颜色属性值是?
			$("#result").text("获取背景颜色属性值是："+bgcolor);
			});
			/*2.点击 设置背景颜色 按钮 设置背景颜色值*/
			$("#setColorBtn").click(function(){
				//.box 添加颜色 橙色
			$(".box").css("background-color","orange");
			//result 添加文本：效果修改为橙色
			$("#result").text("效果修改为橙色");
			});
			/*3.点击 设置多层效果 按钮 设置效果如下 背景色、倒角、盒子阴影*/
			 $("#setBtn").click(function(){
							$(".box").css({"background-image":"url(../img/xiaoxin.png)",
							               "border-radius":"50%",
										   "box-shadow":"5px 5px 10px #ff0",
										   "width":"300px",
										   "height":"300px",
										   "background-size":"100% 100%"
							});
						});
			
			/*4.点击 获取元素宽度  按钮  获取当前元素宽高度*/
			$("#getWidthBtn").click(function(){
			var w=$(".box").width();
			$("#result").text("获取的宽度是："+w+"px");
			});
			/*5.点击 获取元素高度【..】  按钮  算高度是？？*/
			$("#gbpBtn").click(function(){
			var gbp=$(".box").outerHeight();
			$("#result").text("获取的宽度是："+gbp+"px");
			});
			/*6.点击 获取元素高度【..】  按钮  传参bool*/
			$("#bpmBtn").click(function(){
			var bpm=$(".box").outerHeight(true);
			$("#result").text("实际元素高度为："+bpm+"px");
			});
		</script>
	</body>
</html>